<template>
    <view class="index">
        <view class="main">
            <view class="header">
                <view class="search-box" @click="show=true">
                    <text class="c_9">搜索商品</text>
                    <text class="search-icon" >搜索</text>
                </view>
            </view>
        </view>
        <s-goods :goodsList="list"></s-goods>

        <view class="wrap">
            <u-back-top :scroll-top="scrollTop"></u-back-top>
        </view>
        <u-popup :show="show" mode="right"  @close="show=false" >
            <view class="p_20">
                <u--form
                    labelPosition="left"
                    :model="queryObj"
                    ref="uForm"
                    labelWidth="100"
                >
                    <u-form-item
                        label="类型"
                        prop="area"
                        borderBottom
                        ref="item1"
                    >
                        <u-radio-group v-model="queryObj.type">
                            <u-radio name="1" label="车找人"></u-radio>
                            <view class="m_l_10">
                                <u-radio name="2" label="人找车"></u-radio>
                            </view>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item
                        label="出发地省市区"
                        prop="area"
                        borderBottom
                        ref="item1"
                    >
                        <uni-data-picker v-model="queryObj.area" :localdata="areaList" placeholder="请选择出发地省市区" popup-title="请选择出发地省市区" @change="onchange($event,1)"  ></uni-data-picker>
                    </u-form-item>
                    <u-form-item
                        label="目的地省市区"
                        prop="destinationArea"
                        borderBottom
                        ref="item1"
                    >
                        <uni-data-picker v-model="queryObj.destinationArea" :localdata="areaList" placeholder="请选择目的地省市区" popup-title="请选择目的地省市区" @change="onchange($event,2)"  ></uni-data-picker>
                    </u-form-item>
                    <u-form-item
                        label="出发时间"
                        prop="departureTime"
                        borderBottom
                        @click="showTime = true"
                        ref="item1"
                    >
                        <u--input
                            v-model="queryObj.departureTime"
                            disabled
                            disabledColor="#ffffff"
                            placeholder="请选择出发时间"
                            border="none"
                        ></u--input>
                        <u-icon
                            slot="right"
                            name="arrow-right"
                        ></u-icon>
                    </u-form-item>
                    <u-form-item
                        label="车辆分类"
                        prop="lxNameYj"
                        borderBottom
                        ref="item1"
                    >
                        <uni-data-picker v-model="queryObj.lxNameYj"  :localdata="pickerTypeList" placeholder="请选择车辆分类" popup-title="请选择车辆分类" @change="onTypeChange" ></uni-data-picker>
                    </u-form-item>
                </u--form>
                <view class="dis_f_c_c m_t_100">
                    <view style="width: 300rpx;">
                        <u-button type="warning" @click="handleReset">重置</u-button>
                    </view>
                    <view class="m_l_10" style="width: 300rpx;">
                        <u-button type="primary" @click="handleSearch">搜索</u-button>
                    </view>
                </view>
            </view>
        </u-popup>

        <u-datetime-picker
            :show="showTime"
            v-model="value1"
            mode="datetime"
            :formatter="formatter"
            @confirm="handleTimeConfirm"
        ></u-datetime-picker>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>
<script>
import {myMixins} from "@/mixins/myMixins";
import {getInformationListApi,getAreaListApi,getByKeyApi} from "@/sheep/api";

export default {
    mixins:[myMixins],
    data() {
        return {
            show:false,
            titleHeight: 0,
            customTop:0,
            queryObj:{
                type:1,
                lxNameYj:'',
                departureTime:'',
                destinationArea:'',
                destinationProvince: '',
                destinationCity: '',
                destinationDistricts: '',
                area: '',
                province: '',
                city: '',
                districts: '',
            },
            list:[],
            areaList:[],
            showTime:false,
            value1: Number(new Date()),
            pickerTypeList:[],
        };
    },
    onLoad() {
    },
    onShow(options) {
        this.getHeight()
        this.getArea()
        this.getTypeList()
    },
    methods:{
        async getTypeList() {
            let res = await getByKeyApi("goods_type");
            this.pickerTypeList = res.data.map(item=>{
                return {
                    text: item.configName,
                    value: item.configName
                }
            })
        },
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + res.height + 16;
            this.customTop = res.top + 3;
        },
        getArea(){
            getAreaListApi().then(res=>{
                this.areaList = this.filterAreaName(res.data)
            })
        },
        filterAreaName(data){
            // if(!(data?.length <= 0)){
            // 等价于
            if(!data || data.length <= 0){ // 递归的出口
                return null;
            }
            return data.map(x => { // 循环数据
                const model = { // 把后端返回过来的数据里面的键给替换成我想要的键
                    children: x.children,
                    text: x.name,
                    value: x.areaCode,
                };
                const children = this.filterAreaName(x.children); // 子级数据

                if(children){ // 一直往下循环查找有没有children这个键，如果有就直接添加一个子级字段名，这个字段名就是存子级数据
                    model.children = children;
                }
                return model; // 返回这个数据
            })
        },
        onchange(e,type) {
            const value = e.detail.value
            if (value.length>0){
                if (type==1){
                    this.queryObj.province= value[0].text
                    this.queryObj.city= value[1].text
                    this.queryObj.districts= value[2].text
                    this.queryObj.area= value[2].text
                }
                if (type==2){
                    this.queryObj.destinationProvince= value[0].text
                    this.queryObj.destinationCity= value[1].text
                    this.queryObj.destinationDistricts= value[2].text
                    this.queryObj.destinationArea= value[2].text
                }
            }else{
                if (type==1){
                    this.queryObj.province = ''
                    this.queryObj.city = ''
                    this.queryObj.districts = ''
                    this.queryObj.area = ''
                }
                if (type==2){
                    this.queryObj.destinationProvince = ''
                    this.queryObj.destinationCity = ''
                    this.queryObj.destinationDistricts = ''
                    this.queryObj.destinationArea = ''
                }

            }
        },
        onTypeChange(e){
            const value = e.detail.value
            console.log("value", value);
            if (value.length>0){
                this.queryObj.lxNameYj = value[0].text
            }else{
                this.queryObj.lxNameYj = ''
            }

        },
        handleTimeConfirm(e){
            this.queryObj.departureTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
            this.$refs.uForm.validateField('queryObj.departureTime')
            this.showTime = false
        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            if (type === 'hour') {
                return `${value}时`
            }
            if (type === 'minute') {
                return `${value}分`
            }
            return value
        },
        getList(){
            console.log("this.queryObj", this.queryObj);
            getInformationListApi(this.queryObj).then(res=>{
                this.list = this.list.concat(res.rows)
                this.total = res.total
                if (this.queryObj.pageNum*this.queryObj.pageSize<this.total){
                    this.status = 'loadmore'
                }else{
                    this.status = 'nomore'
                }
                uni.stopPullDownRefresh()
            })
        },
        updateData(data){
            this.queryObj.pageNum = 1
            this.total = 0
            this.status = 'loadmore'
            this.list = []
            this.getList()
        },
        handleSearch(){
            this.show=false
            this.updateData()
        },
        handleReset(){
            this.queryObj={
                type:1,
                lxNameYj:'',
                departureTime:'',
                destinationArea:'',
                destinationProvince: '',
                destinationCity: '',
                destinationDistricts: '',
                area: '',
                province: '',
                city: '',
                districts: '',
            }
            this.show=false
            this.updateData()
        }
    },
};
</script>
<style lang="scss" scoped>
.index {
    .custom {
        position: absolute;
        left: 30rpx;
        font-size: 30rpx;
        display: flex;
        align-items: center;
    }
    .main {
        padding: 0 30rpx;
        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://www.cjzn.fun/profile/uploadPath/indexbg.png")
                no-repeat;
                background-size: 100% auto;
                z-index: -2;
            }
            .search-box {
                // background-color: #fff;
                border: #000 1rpx solid;
                border-radius: 40rpx;
                width: 100%;
                height: 70rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 5rpx 0 30rpx;
                color: #333;
                font-size: 26rpx;
                .search-icon {
                    background-color: #000;
                    border-radius: 40rpx;
                    color: #fff;
                    height: 60rpx;
                    width: 120rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .goodsList {
        flex: 4;
        .goodsItem {
            padding: 15rpx 30rpx;
            display: flex;
            align-items: center;
            .goodsInfo {
                flex: 1;
                padding: 0 0 0 15rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .wordLimit {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    /* 设置最大显示行数 */
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                }
                .goodsBottom {
                    display: flex;
                    justify-content: space-between;
                    .goodsBut {
                        display: flex;
                        border-radius: 6rpx;
                        font-size: 24rpx;
                        width: 120rpx;
                        height: 40rpx;
                        background-color: yellow;
                        align-items: center;
                        justify-content: center;
                        border: #dddddd 1rpx solid;
                    }
                }
            }
        }
    }
}
</style>
